<template>
	<view>
		<view class="flex flex-column align-center p-2" v-for="(item,idx) in gzList" :key="idx">
			<!-- 头像用户名 收藏 分享 -->
			<view class="w-100 flex flex-row align-center justify-between">
				<view class="flex flex-row align-center">
					<view>
						<u-avatar :src="item.avatar"></u-avatar>
					</view>
					<view class="u-font-lg font-weight-bold ml-2">
						<text>{{item.nickname}}</text>
					</view>
				</view>
				<view>
					<u-icon class="m-2" name="star" color="#00000" size="38"></u-icon>
					<u-icon class="ml-1" name="share" color="#00000" size="38"></u-icon>
				</view>
			</view>
			<!-- 图片 -->
			<view class="flex w-100 h-600 ">
				<u-swiper @click="previewImage" height="600" class="w-100" :list="item.imgs"></u-swiper>
			</view>
			<!-- 图片简述 发布时间 -->
			<view class="flex">
				<u-read-more ref="uReadMore" :shadow-style="readmorestyle" show-height="120" close-text="展开" color="#000000">
					<u-parse :html="item.js"></u-parse>
				</u-read-more>
			</view>
			<!-- 评论 点赞 -->
			<view class="flex flex-row justify-between w-100 mt-2">
				<view class="flex-6 text-light-muted font-sm">
					<text @click="show = true">说点什么...</text>
				</view>
				<view class="flex-1">
					<u-icon @click="show = true" color="#000000" size="38" name="chat"></u-icon>
				</view>
				<view class="flex-1">
					<u-icon color="#000000" size="38" name="heart"></u-icon>
				</view>
			</view>
		</view>
		<view>
			<u-popup v-model="show" mode="bottom">
				<view class="flex align-end justify-center py-3 ">
					<view class="flex flex-1 align-end font px-1">
						<u-input v-model="content" :auto-height="true" height="28" :border="true" type="textarea" placeholder="说点什么..." />
					</view>
					<view class="align-center">
						<view class="mx-2 m-1 u-font-lg font-weight-bold" @click="submit">发送</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			gzList: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		
		data() {
			return {
				show: false,
				content:'',
				readmorestyle: {
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					paddingTop: "80rpx",
					marginTop: "-80rpx"
				}
			}
		},
		methods: {
			//预览轮播图
			previewImage: function(index,urls) {
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: urls ,//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					loop: true
				})
			},
			submit(){
				//是否为空
				if (this.content === '') {
					return uni.showToast({
						title: '消息不能为空',
						icon: 'none'
					});
				}
				this.$emit('submit',this.content)
				// 清空输入框
				this.content = ''
			}
		}
	}
</script>

<style>
</style>
